<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1 {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <script>
        const vDom = {
            tag: 'div',
            text: 'hello',
            attrs: {
                class: 'a1',
                style: 'background: red',
            },
        };

        function render (vDom) {
            const el = document.createElement(vDom.tag);
            el.innerText = vDom.text;
            for (const key in vDom.attrs) {
                el.setAttribute(key, vDom.attrs[key]);
            }
            if (vDom.parent) {
                render(vDom.parent).appendChild(el);
            } else {
                document.body.appendChild(el);
            }
            return el;
        }

        render(vDom);

    </script>
</body>
</html>